<template>
  <div class="box">
    <h1 v-if="isDone">Loading...</h1>
    <ul style="margin: 0px" v-else-if="lists.length">
      <!-- <li class="every-Li"></li> -->
      <li class="every-Li" v-for="list in lists" :key="list.id">
        <a :href="list.html_url" target="_blank">
          <img :src="list.avatar_url" style="width: 70%; height: 60%" />
        </a>
        <p>{{ list.login }}</p>
      </li>
    </ul>
    <h1 v-else>请输入内容搜索</h1>
  </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      lists: [],
      isDone: false,
    };
  },

  mounted() {
    //定义一个可以接受数据的方法
    this.$bus.$on("addList", this.addList);
    this.$bus.$on("TabDone", this.TabDone);
  },
  beforeDestory() {
    this.$bus.$off("addList", this.addList);
    this.$bus.$off("TabDone", this.TabDone);
  },
  methods: {
    addList(arr) {
      // console.log("list", arr);
      this.lists = arr;
    },

    //定义一个修改isDone状态的方法
    TabDone(isDone) {
      this.isDone = isDone;
    },
  },
};
</script>

<style>
.every-Li {
  float: left;
  width: 200px;
  height: 250px;
  text-align: center;
  padding-top: 30px;
  border: 1px solid rgb(226, 221, 221);
  list-style: none;
}
</style>